<!DOCTYPE html>
<html>
<head>
    <title>Moonjs-Demo</title> 
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/TetrisManager.js"></script>
</head>
<body>   
    <script type="text/javascript">
        var moonjs=new MoonJs();
        moonjs.init(moonjs.createCanvas({w:940,h:660,c:'#DDD'}));
	    moonjs.start();
        //----UI和控制处理---------
        TetrisManager.initGame();
        TetrisManager.data.callBack=callBack
        const [cx,cy]=[20,20]
        var { player, playfield, nextTetr, ROWS, COLS } = TetrisManager.data;
        var boxW=30;
        var tNum=0;
        var level=1;
        function updateMapUI(){
            for (let y = 0; y < ROWS; y++) {
                for (let x = 0; x < COLS; x++) {
                    let n=playfield[y][x];
                    let c=n?'#333333':'#999999';
                    moonjs.createDisplay('rect').setColor(c).setWH(boxW,boxW).setXY(cx+x*(boxW+1),cy+y*(boxW+1));
                }
            }
        }
        function updatePlayUI(){
            let [x,y,tetromino]=[player.pos.x,player.pos.y,player.tetromino];
            for(let i=0;i<tetromino.length;i++){
                let t=tetromino[i];
                for(let j=0;j<t.length;j++){
                    let y1=y+i;
                    let x1=x+j;
                    if(t[j]) moonjs.createDisplay('rect').setColor('#333333').setWH(boxW,boxW).setXY(cx+x1*(boxW+1),cy+y1*(boxW+1));
                }
            } 
        }
        function updateNextUI(){
            let tetromino=TetrisManager.data.nextTetr;
            if(!tetromino)return;
            let [x,y]=[350,100];
            for(let i=0;i<tetromino.length;i++){
                let t=tetromino[i];
                for(let j=0;j<t.length;j++){
                    let y1=y+i*(boxW+1);
                    let x1=x+j*(boxW+1);
                    if(t[j]) moonjs.createDisplay('rect').setColor('#333333').setWH(boxW,boxW).setXY(x1,y1);
                }
            } 
        }
        function updateScoreUI(){
            let score=TetrisManager.data.player.score;
            level=Math.floor(score/300)+1;
            moonjs.createDisplay('font').setColor('#333333').setXY(350,50).setText('分数：'+score||0);
            moonjs.createDisplay('font').setColor('#333333').setXY(350,70).setText('等级：'+level);
        }
        function updateUI(){
            updateMapUI();
            updatePlayUI();
            updateScoreUI();
            updateNextUI();
        }
        updateUI()
        // 启动游戏循环
        //setInterval(gameLoop, 1000); // 每秒执行一次游戏循环
        moonjs.addKeyboard(keyDownCb);
        function keyDownCb(e){
            switch(e.keyCode){
                case 37:
                case 65:
                    TetrisManager.moveLeft()
                break;
                case 38:
                case 87:   
                    TetrisManager.rotatePlayerTetromino();
                break;
                case 39:
                case 68:
                    TetrisManager.moveRight();
                break;
                case 40:
                case 83:
                    if(TetrisManager.isPlaying()){
                        moveDown();
                    }
                break;
            }
        }
        function moveDown(){
            TetrisManager.moveDown();
        }
        function callBack(data){
            if(data.type==0){//结束
                setTimeout(()=>{
                    alert('游戏结束');
                    TetrisManager.initGame();
                },500);
            }else if(data.type==1){//消行
                TetrisManager.data.isPlay=false;
                let {COLS}=TetrisManager.data;
                let y=(data.y)*(boxW+1);
                let w=COLS*(boxW+1);
                moonjs.createDisplay('rect').setColor('#05AAAAAA').setWH(w,boxW).setXY(cx/4+w/2,cy+y);
                setTimeout(()=>{
                    TetrisManager.data.isPlay=true;
                },400);
            }else if(data.type==2){//落到底部
                
            }
        }
        moonjs.update=()=>{
            if(TetrisManager.isPlaying()){
                moonjs.removeAll();
                updateUI();
                let n=50-level;
                if(tNum++>n){
                    moveDown();
                    tNum=0;
                }
            }
        }
    </script>
</body>
</html>